<template>
	<view class="ShopFavoritePage">
		<view class="ShopFavorite-top">
			<view class="headerNavbar" :style="{ height: navbarHeight + 'px' }">
				<view class="titleBar" :style="{ height: capsuleHeight + 'px', top: TimeBarHeight + 'px' }">
					<image src="../../static/bar/back.png" mode="" @click="goback"></image>
					<view class="title">
						<text :class="{ active: activeTab === 'hotel' }" @click="changeTab('hotel')">
							酒旅收藏
						</text>
						<text :class="{ active: activeTab === 'equip' }" @click="changeTab('equip')">
							装备收藏
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="ShopFavorite-content" :style="`min-height: calc(100vh - ${navbarHeight}px)`">
			<swiper :current="currentSwiper" @change="onSwiperChange" :indicator-dots="false" swipe-threshold="50"
				class="swiper-container" :style="`min-height: calc(100vh - ${navbarHeight}px)`">
				<!-- 酒旅收藏页面 -->
				<swiper-item style="overflow-y: auto !important;">
					<view class="ShopFavoriteCard-box">
						<view v-if="hotelFavorites.length === 0" class="isNull">
							<image src="https://img.js.design/assets/img/66dafcd4c3154e41040205f2.png#04f07b62b993fbf1a7b059a3602a32e4"	mode=""></image>
							<text>暂无收藏...</text>
						</view>
						<view v-else class="content-box" :style="`min-height: calc(100vh - ${navbarHeight}px)`">
							<travelFavoriteVue :hotelFavorites="hotelFavorites"></travelFavoriteVue>
						</view>
					</view>
				</swiper-item>
				<!-- 装备收藏页面 -->
				<swiper-item>
					<view class="ShopFavoriteCard-box">
						<view v-if="equipFavorites.length === 0" class="isNull">
							<image src="https://img.js.design/assets/img/66dafcd4c3154e41040205f2.png#04f07b62b993fbf1a7b059a3602a32e4"	mode=""></image>
							<text>暂无收藏...</text>
						</view>
						<view v-else class="content-box" :style="`min-height: calc(100vh - ${navbarHeight}px)`">
							<equipFavoriteVue></equipFavoriteVue>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import travelFavoriteVue from './components/travelFavorite.vue';
	import equipFavoriteVue from './components/equipFavorite.vue';
	
	import {ref} from 'vue';
	import {onShow} from '@dcloudio/uni-app';
	import {TimeBarHeight,capsuleHeight,navbarHeight} from '@/config/systemInfo.js';
	import { getHotelFavorites } from '@/config/API/user';
	
	const userId = ref()
	// 初始选择酒旅
	const activeTab = ref('hotel');
	const currentSwiper = ref(0);

	// 收藏数据
	const hotelFavorites = ref([]); // 酒旅收藏数据
	const equipFavorites = ref([]); // 装备收藏数据

	// 切换活动标签
	const changeTab = (tab) => {
		activeTab.value = tab;
		currentSwiper.value = tab === 'hotel' ? 0 : 1;
	};

	// 监听swiper切换
	const onSwiperChange = (e) => {
		const current = e.detail.current;
		currentSwiper.value = current;
		activeTab.value = current === 0 ? 'hotel' : 'equip';
	};

	// 返回页面
	const goback = () => {
		// 返回上一页
		uni.navigateBack({
			delta: 1,
		});
	};

	// 获取收藏数据
	const getFavorites = async () => {
		try {
			// 酒旅收藏数据
			const resHotel = await getHotelFavorites(userId.value);
			hotelFavorites.value = resHotel.data;
			console.log('酒旅收藏数据',hotelFavorites.value);
			// const resEquip = await getEquipFavorites();
			// equipFavorites.value = resEquip.data;
		} catch (error) {
			console.error('获取收藏数据失败', error);
		}
	};

	onShow(() => {
		userId.value = uni.getStorageSync('userInfo').id
		getFavorites();
	});
</script>

<style lang="scss" scoped>
	.ShopFavoritePage {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		.ShopFavorite-top {
			box-shadow: 0rpx 17rpx 51rpx rgba(233, 239, 245, 1);
			position: sticky;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9;
			.headerNavbar {
				width: 100%;
				position: sticky;
				top: 0;
				left: 0;
				right: 0;
				z-index: 9;
				background-color: #fff;

				.titleBar {
					position: absolute;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					padding: 0 20rpx;
					box-sizing: border-box;

					.title {
						width: 100%;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						gap: 40rpx;

						text {
							font-size: 30rpx;
							font-weight: 400;
							color: rgba(56, 56, 56, 1);
						}

						.active {
							font-size: 34rpx;
							font-weight: 500;
							color: #000;
						}
					}

					image {
						width: 21rpx;
						height: 32rpx;
						position: fixed;
						left: 20rpx;
					}
				}
			}
		}

		.ShopFavorite-content {
			width: 100%;
			.swiper-container {
				width: 100%;
				.ShopFavoriteCard-box{
					width: 100%;
					height: 100%;
					.content-box{
						width: 100%;
						background-color: #f5f6f7;
					}
					.isNull {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						height: 50vh;
						gap: 30rpx;
						image {
							width: 400rpx;
							height: 400rpx;
						}
					
						text {
							color: rgba(153, 153, 153, 1);
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>